<!-- 商机详情 -->
<template>
    <div>
        <div class="marquee-block" v-if="showMarquee">
            <img class="laba" src="../../../img/laba.png">
            <div class="marquee-content">
                <span>系统分析判定“{{wechatName}}”与“{{custName}}”为同一人，已为你自动整合商机</span>
            </div>
            <!--            <img class="close" src="../../../img/close.png">-->
        </div>
        <div class="targetInfo" :style="{marginTop:showMarquee?'':'0.375rem'}">
            <div class="targetInfo-left">
                <img class="wechat-icon" src="../../../img/wechat.png">
                <div class="line"></div>
                <img class="customer-icon" src="../../../img/customer.png">
                <img class="link-icon" src="../../../img/link.png">
            </div>
            <div class="targetInfo-right">
                <p class="nickName">{{nickName||'--'}}</p>
                <p class="custName">{{customerName||'--'}}</p>
            </div>
        </div>
        <div class="tab">
            <span class="tab-left" v-bind:class="{tabChecked:actStatus==0}" htmdEvt='markRemindTabAll_btn'
                  @click="changeStatus(0)">全部<span
                v-bind:class="{numChecked:actStatus==0}">({{allNum}})</span></span>
            <span class="tab-right" v-bind:class="{tabChecked:actStatus==1}" htmdEvt='markRemindTab_btn'
                  @click="changeStatus(1)">备注提醒<span
                v-bind:class="{numChecked:actStatus==1}">({{remarkNum}})</span></span>
        </div>
        <div class="noMarquee" v-bind:class="{hasMarquee:showMarquee}">
            <scroller v-if="!showNoData" style="position: relative;" ref="my_scroller" :on-infinite="infinite"
                      :on-refresh="refresh">
                <div v-for="(items, index) in opportunityList" style="background-color: #fff;">
                    <ul class="opportunity-list" style="cursor: pointer">
                        <li class="list-head">
                            <p class="head-date">{{items.ymd}} {{items.week}}</p>
                        </li>
                        <ul v-for="(item, idx) in items.list">
                            <li class="one" :style="{marginTop:idx==0?'0.6rem':''}">
                                <span class="circle"></span>
                                <span class="one-right">{{item.hm}}</span>
                            </li>
                            <li class="line-box">
                                <div class="two">
                                    <!--查看文章，进入文章热力图 -->
                                    <p style="-webkit-box-orient: vertical;" v-if="item.titleType==4">
                                        <span class="two-action">{{item.browseType==0?'查看':(item.browseType==1?'报名':(item.browseType==2?'阅读':''))}}</span>
                                        <span class="two-type">文章</span>
                                        <span class="two-title has-pointer" htmdEvt='businessSourceByTitle_btn'
                                              @click="goToArticleHeatMap(item.titleId)">{{item.title}}</span>
                                    </p>
                                    <!--线上活动-->
                                    <p style="-webkit-box-orient: vertical;" v-if="item.titleType==5">
                                        <span class="two-action">{{item.browseType==0?'查看':(item.browseType==1?'报名':(item.browseType==2?'阅读':''))}}</span>
                                        <span class="two-type">线上活动</span>
                                        <span class="two-title has-pointer" htmdEvt='businessSourceByTitle_btn'
                                              @click="goToActivityDetail(item.titleType,item.titleId)">{{item.title}}</span>
                                    </p>
                                    <!--线下活动-->
                                    <p style="-webkit-box-orient: vertical;" v-if="item.titleType==6">
                                        <span class="two-action">{{item.browseType==0?'查看':(item.browseType==1?'报名':(item.browseType==2?'阅读':''))}}</span>
                                        <span class="two-type">线下活动</span>
                                        <span class="two-title has-pointer" htmdEvt='businessSourceByTitle_btn'
                                              @click="goToActivityDetail(item.titleType,item.titleId)">{{item.title}}</span>
                                    </p>
                                    <!-- 视频 -->
                                     <p style="-webkit-box-orient: vertical;" v-if="item.titleType==7 || item.titleType==8">
                                        <span class="two-action">查看</span>
                                        <span class="two-type">视频</span>
                                        <span class="two-title has-pointer" htmdEvt='businessSourceByTitle_btn'
                                              @click="goToVideoinfo(item.titleId)">{{item.title}}</span>
                                    </p>
                                    <!--名片 图文-->
                                    <p style="-webkit-box-orient: vertical;"
                                       v-if="item.titleType==1||item.titleType==0">
                                        <span class="two-action">{{item.browseType==0?'查看':(item.browseType==1?'报名':(item.browseType==2?'阅读':''))}}</span>
                                        <span class="two-type">{{item.titleType==0?'图文':'名片'}}</span>
                                        <span class="two-title has-pointer" htmdEvt='businessSourceByTitle_btn'
                                              @click="goToShareDetail(item.titleId)">{{item.title}}</span>
                                    </p>
                                    <!--消息-->
                                    <p style="-webkit-box-orient: vertical;" v-if="item.titleType==3">
                                        <span v-if="item.customerName" class="two-title has-pointer"
                                              @click="callPhone(item.customerName)" htmdEvt='businessSourceByTitle_btn'>{{item.title}}</span>
                                        <span v-if="!item.customerName" class="two-title has-pointer"
                                              @click="callPhone(item.nickName)" htmdEvt='businessSourceByTitle_btn'>{{item.title}}</span>
                                    </p>
                                </div>
                                <div class="three">
                                    <span class="three-left">商机来源：{{item.sourceName}}</span>
                                    <span class="three-right has-pointer" @click="goToNoteRemind(item.id)" htmdEvt='lgb_h5_business_targetOpportunity_1'>
                                        <img src="../../../img/pencil.png">
                                        <span>备注提醒</span>
                                     </span>
                                </div>
                                <div class="four" v-if="item.remark">
                                    <p style="-webkit-box-orient: vertical;">{{item.remark}}</p>
                                </div>
                            </li>
                        </ul>
                    </ul>
                </div>
            </scroller>
        </div>
        <no-data :showNoData="showNoData" style="position:relative;margin-top:4rem;" :show="show"></no-data>
        <!-- <loading :showLoading="showLoading"></loading> -->
    </div>
</template>

<script>
    import "./targetOpportunity.less";
    // import "./targetOpportunity.js";
    // import splitUrl from "@common/js/splitUrl.js"
    import noData from '@src/common/components/noData/noData';
    // import loading from '@src/common/loading/loading';
    // import VueScroller from 'vue-scroller';
    // import Vue from 'vue';

    // Vue.use(VueScroller);
    export default {
        name: "targetOpportunity",
        components: {
            noData,
            // loading
        },
        data() {
            return {
                // 商机id 客户编号或者微信id  商机来源   是客户还是微信0:微信 1:客户
                id: 0,
                cusOrWeChat: 0,
                sourceId: null,
                number: 0,
                // 占位图&加载中
                showNoData: false,
                show: 'show',
                showLoading: true,
                actStatus: 0,// 状态：0-所有；1-备注提醒
                // 分页
                offset: 0,
                // 处理前的名称
                nickName: '',
                customerName: '',
                // 处理后的名称
                custName: '',
                wechatName: '',
                // 数量
                allNum: 0,
                remarkNum: 0,
                // 跑马灯控制
                showMarquee: false,
                opportunityList: []
            };
        },
        created() {
            // 页面接参  商机id 客户编号或者微信id    是客户还是微信0:微信 1:客户
            this.id = window.splitUrl()['opportunityId']
            this.sourceId = window.splitUrl()['sourceId']
            this.cusOrWeChat = window.splitUrl()['cusOrWeChat']
            this.number = window.splitUrl()['number']
            // 进到该商机 更新它为已读   暂不用
            // this.upDateRead()
        },
        methods: {
            //切换状态
            changeStatus(status) {
                this.actStatus = status
                this.showNoData = false
                this.opportunityList = [];
                this.offset = 0;
                this.$refs.my_scroller.finishInfinite(false)
            },
            // 上拉加载
            infinite(done) {
                console.log('上拉')
                let that = this
                setTimeout(() => {
                    that.offset++    //每当向上滑动的时候就让页数加1
                    if (that.actStatus == 0) {
                        that.getAllData(that.offset, done)
                    } else {
                        that.getNoteData(that.offset, done)
                    }
                }, 500)
            },
            // 下拉刷新
            refresh(done) { //这是向下滑动的时候请求最新的数据
                console.log('下拉')
                this.offset = 1
                if (this.actStatus == 0) {
                    this.getAllData(this.offset, done)
                } else {
                    this.getNoteData(this.offset, done)
                }
            },
            // 客户下全部商机
            getAllData(offset, fn) {
                console.log('客户下全部商机')
                this.$axiosHttp.http({
                    name: '',
                    url: apiUrl.cusAllList,
                    needFailCallback: true,
                    method: 'post',
                    params: {
                        pageNow: offset,
                        pageSize: 10,
                        sourceId: this.sourceId,// 传来源
                        cusOrWeChat: this.cusOrWeChat, // 是客户还是微信0:微信 1:客户
                        number: this.number // 客户编号或者微信id
                    }
                }, (res) => {
                    // this.showLoading = false;
                    let data = res.data.data.result
                    // 拿到昵称和客户名称处理 超出5个字截取，后加。。。
                    this.resolveMarquee(data.nickName, data.customerName)
                    this.nickName = data.nickName
                    this.customerName = data.customerName
                    this.allNum = data.allNum
                    this.remarkNum = data.remarkNum
                    if (offset === 1) {
                        this.opportunityList = data.list   //如果是想下滑动，刷新数据 就让items等于最新数据
                    } else {
                        this.opportunityList = this.opportunityList.concat(data.list) //否则就把数据拼接
                    }
                    if (data.list.length < 10) {
                        fn(true)
                    } else {
                        fn(false)
                    }
                    if (this.opportunityList.length < 1) {
                        this.showNoData = true;
                    }
                }, res => {
                    fn(true)
                    // this.showLoading = false;
                    if (this.opportunityList.length == 0) {
                        this.showNoData = true;
                    }
                },
                res => {
                    fn(true)
                    // this.showLoading = false;
                    if (this.opportunityList.length == 0) {
                        this.showNoData = true;
                    }
                })
            },
            // 客户下备注商机列表
            getNoteData(offset, fn) {
                console.log('客户下备注商机列表')
                this.$axiosHttp.http({
                    name: '',
                    url: apiUrl.cusRemarkList,
                    needFailCallback: true,
                    method: 'post',
                    params: {
                        pageNow: offset,
                        pageSize: 10,
                        sourceId: this.sourceId,// 传来源
                        cusOrWeChat: this.cusOrWeChat, // 是客户还是微信0:微信 1:客户
                        number: this.number // 客户编号或者微信id
                    }
                }, (res) => {
                    // this.showLoading = false;
                    let data = res.data.data.result
                    // 拿到昵称和客户名称处理 超出5个字截取，后加。。。
                    this.resolveMarquee(data.nickName, data.customerName)
                    this.nickName = data.nickName
                    this.customerName = data.customerName
                    this.allNum = data.allNum
                    this.remarkNum = data.remarkNum
                    if (offset === 1) {
                        this.opportunityList = data.list   //如果是想下滑动，刷新数据 就让items等于最新数据
                    } else {
                        this.opportunityList = this.opportunityList.concat(data.list) //否则就把数据拼接
                    }
                    if (data.list.length < 10) {
                        fn(true)
                    } else {
                        fn(false)
                    }
                    if (this.opportunityList.length < 1) {
                        this.showNoData = true;
                    }
                }, res => {
                    fn(true)
                    this.showLoading = false;
                    if (this.opportunityList.length == 0) {
                        this.showNoData = true;
                    }
                }, res => {
                    fn(true)
                    this.showLoading = false;
                    if (this.opportunityList.length == 0) {
                        this.showNoData = true;
                    }
                })
            },
            // 处理跑马灯
            resolveMarquee(wechatName, custName) {
                console.log(wechatName, custName)
                let that = this
                // 执行过跑马灯  不再执行
                if (this.wechatName && this.custName) {
                    return
                }
                // 接口返回 昵称 客户名  判定跑马灯
                if (wechatName && custName) {
                    let wechat = Array.from(wechatName)
                    if (wechat.length > 5) {
                        wechat = wechat.slice(0, 5).join('') + '...'
                    } else {
                        wechat = wechat.slice(0, 5).join('')
                    }
                    this.wechatName = wechat
                    console.log(wechat)
                    let cust = Array.from(custName)
                    if (cust.length > 5) {
                        cust = cust.slice(0, 5).join('') + '...'
                    } else {
                        cust = cust.slice(0, 5).join('')
                    }
                    this.custName = cust
                    console.log(cust)
                    this.showMarquee = true
                    setTimeout(function () {
                        that.showMarquee = false
                    }, 10000)
                }
            },
            // 更新未读状态
            upDateRead() {
                console.log('更新未读状态')
                let ids = []
                ids[0] = this.id
                console.log(ids)
                this.$axiosHttp.http({
                        name: '',
                        url: apiUrl.updateRead,
                        needFailCallback: true,
                        method: 'post',
                        params: {
                            ids: ids.join(',')
                        }
                    }
                )
            },
            // titleType   0:图文 1:名片 3:消息 4:文章 5:线上活动 6:线下活动
            // sourceId   0:偏好探测 1:转发分享 2:拓客工具 3:恒天财富APP 4:恒天官网

            // 进入文章热力图
            goToArticleHeatMap(id) {
                console.log('文章id', id)
                window.jsObj.goToArticleHeatMap("hot-detail?flag=1&id=" + id, id);
            },
            // 分享详情
            goToShareDetail(id) {
                console.log('名片 图文', id)
                let obj = {
                    id: id
                };
                window.jsObj.goToShareDetail(JSON.stringify(obj))
            },
            // 去分享详情页
            goToVideoinfo(id) {
                 let obj = {
                    id: id
                };
                window.jsObj.intoShareDetail(JSON.stringify(obj))
            },
            // 进入活动详情
            goToActivityDetail(type, id) {
                if (type == 5) {
                    // 线上
                    window.jsObj.gotoPageMaket("/onLineActivityDetail?actId=" + id, id);
                } else {
                    // 线下
                    window.jsObj.gotoPageMaket("/activityDetail?activityId=" + id, id);
                }
            },
            // 拨打电话（兼容ios13）
            callPhone(phone) {
                console.log(phone)
                // 校验电话
                let phoneCheck = /^1[3456789]\d{9}$/
                if (phoneCheck.test(phone)) {
                    let obj = {
                        phone: phone
                    }
                    window.jsObj.callPhone(JSON.stringify(obj))
                }
            },
            // 跳转备注提醒
            goToNoteRemind(id) {
                console.log(id)
                let obj = {
                    businessid: id
                }
                window.jsObj.goToNoteRemind(JSON.stringify(obj))
            }
        }
    }
</script>
